<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0" />
	<title>编辑文章</title>
	<link rel="icon" th:href="${config.SITE_ICON}">
	<link rel="stylesheet" th:href="${config.SITE_CDN+'/static/css/bootstrap.min.css'}"/>
	<link rel="stylesheet" th:href="${config.SITE_CDN+'/static/iconfont/iconfont.css'}"/>
	<link th:if="${article.editorType==2}" rel="stylesheet" th:href="${config.SITE_CDN+'/static/css/highlight.min.css'}"/>
	<link th:if="${article.editorType==2}" rel="stylesheet" th:href="${config.SITE_CDN+'/static/css/simplemde.min.css'}"/>
	<link rel="stylesheet" th:href="${config.SITE_CDN+'/static/css/app.css'}"/>
</head>
<body>
<div class="z-content">
	<div class="z-card">
		<div class="z-card-header">编辑文章</div>
		<div class="z-card-body">
			<form id="articleForm" class="form-horizontal">
				<input th:value="${article.id}" type="hidden" name="id">
				<input id="articleStatus" type="hidden" name="status">
				<input id="articleContent" th:value="${article.content}" type="hidden" name="content">
				<input id="articleContentMd" th:value="${article.contentMd}" type="hidden" name="contentMd">
				<div class="col-lg-7 article-area">
					<div class="form-group">
						<div class="col-xs-12">
							<input type="text" class="form-control" id="title" name="title" th:value="${article.title}" placeholder="请输入文章标题" require="">
						</div>
					</div>
					<div class="form-group form-editor">
						<div class="col-xs-12" id="article-editor">
							<textarea th:if="${article.editorType==2}" id="articleField" class="display-none" th:text="${article.contentMd}"></textarea>
						</div>
					</div>
				</div>
				<div class="col-lg-5 article-extra">
					<div class="form-group">
						<div class="col-xs-12">
							<a class="btn btn-success mr-15" onclick="saveArticle(1)">发布文章</a>
							<a class="btn btn-warning" onclick="saveArticle(0)">保存草稿</a>
						</div>
					</div>
					<div class="form-group">
						<div class="col-xs-12">
							<label class="control-label label-four" >公开/私密 :</label>
							<div class="ml-100 control-label">
								<div class="z-radio">
									<input type="radio" th:field="*{article.isPublic}" name="isPublic" value="1" require=""/>
									<label><i></i>公开</label>
								</div>
								<div class="z-radio">
									<input type="radio" th:field="*{article.isPublic}" name="isPublic" value="0" require=""/>
									<label><i></i>私密</label>
								</div>
							</div>
						</div>
					</div>
					<div class="form-group">
						<div class="col-sm-12">
							<label class="control-label label-four">是否原创 :</label>
							<div class="ml-100 control-label">
								<div class="z-radio">
									<input type="radio" th:field="*{article.origin}" name="origin" value="1" require=""/>
									<label><i></i>原创</label>
								</div>
								<div class="z-radio">
									<input type="radio" th:field="*{article.origin}" name="origin" value="0" require=""/>
									<label><i></i>转载</label>
								</div>
							</div>
						</div>
					</div>
					<div class="form-group">
						<div class="col-xs-12">
							<label class="control-label label-four">文章分类 <span class="text-danger">*</span>: <span class="z-tooltip">
									<i class="z-tooltip-i fa fa-info-circle"></i>
									<span class="z-tooltip-text z-tooltip-right" style="top: -15px">只能选择栏目类型为"文章栏目"的菜单</span>
								</span>
							</label>
							<div class="ml-100">
								<input id="categoryId" type="text" name="categoryId" th:value="${article.categoryId}"  class="form-control" placeholder="请选择" require=""/>
							</div>
						</div>
					</div>
					<div class="form-group">
						<div class="col-xs-12">
							<label class="control-label label-four">文章标签:</label>
							<div class="ml-100">
								<div class="article-tags-names">
									<span class="article-no-tag" th:style="${#lists.isEmpty(article.tagList)?'':'display:none;'}">暂未填写标签</span>
									<span class="article-tag-item" th:each="tag:${article.tagList}">
										<span class="article-tag-name" th:text="${tag.name}"></span>
										<input name="tags" th:value="${tag.name}" type="hidden"/>
										<i class="ri-close-line remove-tag"></i>
									</span>
								</div>
								<div class="article-tags-content">
									<input id="tags" type="text" class="form-control" autocomplete="off" placeholder="请输入文字搜索，按Enter键可添加自定义标签"  aria-owns="tags-popup" spellcheck="false" aria-autocomplete="list" aria-controls="tags-popup"/>
									<ul id="tags-popup" class="autocomplete-results" role="listbox"></ul>
								</div>
							</div>
						</div>
					</div>
					<div class="form-group">
						<div class="col-xs-12">
							<label class="control-label label-four" >文章封面 :</label>
							<div class="ml-100">
								<div class="input-group">
									<input id="cover" type="text" name="cover" th:value="${article.cover}" class="form-control" placeholder="文章封面图片URL">
									<span class="input-group-btn">
					                      <button type="button" class="btn btn-success btn-flat upload-cover">上传</button>
									</span>
								</div>
							</div>
						</div>
					</div>
					<div class="form-group">
						<div class="col-xs-12">
							<label class="control-label label-four">模板页面 <span class="text-danger">*</span>: <span class="z-tooltip">
									<i class="z-tooltip-i fa fa-info-circle"></i>
									<span class="z-tooltip-text z-tooltip-right">当前主题下的html页面名称</span>
								</span>
							</label>
							<div class="ml-100">
								<select name="template" class="form-control" require="">
									<option value="">请选择</option>
									<option th:each="option:${currentTheme.templates}" th:selected="${option}==${article.template}" th:value="${option}" th:text="${option}"></option>
								</select>
							</div>
						</div>
					</div>
					<div class="form-group">
						<div class="col-xs-12">
							<label class="control-label label-four">访问路径 :</label>
							<div class="ml-100">
								<input id="aliasName" type="text" name="aliasName" th:value="${article.aliasName}"  class="form-control" placeholder="访问路径，默认自动生成"/>
								<span class="color-999" th:text="${config.SITE_HOST+'/a/'}"></span><span id="aliasNameAuto" th:text="${article.aliasName==null||article.aliasName==''?'${auto}':article.aliasName}" class="text-primary">${auto}</span>
							</div>
						</div>
					</div>
					<div id="uploadVideoContent" th:class="${article.type==1?'form-group display-none':'form-group'}">
						<div class="col-xs-12">
							<label class="control-label label-four" >视频地址 :</label>
							<div class="ml-100">
								<div class="input-group">
									<input id="video" type="text" name="video" th:value="${article.video}" class="form-control" placeholder="视频URL">
									<span class="input-group-btn">
					                      <button type="button" class="btn btn-success btn-flat upload-video">上传</button>
									</span>
								</div>
							</div>
						</div>
					</div>
					<div class="form-group">
						<div class="col-xs-12">
							<label class="control-label label-four" >文章类型 :</label>
							<div class="ml-100 control-label">
								<div class="z-radio">
									<input type="radio" name="type" th:field="*{article.type}" value="1" checked require=""/>
									<label><i></i>图文</label>
								</div>
								<div class="z-radio">
									<input type="radio" name="type" th:field="*{article.type}" value="2" require=""/>
									<label><i></i>视频</label>
								</div>
							</div>
						</div>
					</div>
					<div class="form-group">
						<div class="col-xs-12">
							<label class="control-label label-four" >是否置顶 :</label>
							<div class="ml-100 control-label">
								<div class="z-radio">
									<input type="radio" name="isTop" th:field="*{article.isTop}" value="1" require=""/>
									<label><i></i>是</label>
								</div>
								<div class="z-radio">
									<input type="radio" name="isTop" th:field="*{article.isTop}" value="0" require=""/>
									<label><i></i>否</label>
								</div>
							</div>
						</div>
					</div>
					<div class="form-group">
						<div class="col-xs-12">
							<label class="control-label label-four" >是否推荐 :</label>
							<div class="ml-100 control-label">
								<div class="z-radio">
									<input type="radio" name="isRec" th:field="*{article.isRec}" value="1" require=""/>
									<label><i></i>是</label>
								</div>
								<div class="z-radio">
									<input type="radio" name="isRec" th:field="*{article.isRec}" value="0" require=""/>
									<label><i></i>否</label>
								</div>
							</div>
						</div>
					</div>
					<div class="form-group">
						<div class="col-xs-12">
							<label class="control-label label-four" >开启评论 :</label>
							<div class="ml-100 control-label">
								<div class="z-radio">
									<input type="radio" name="isComment" th:field="*{article.isComment}" value="1" require=""/>
									<label><i></i>是</label>
								</div>
								<div class="z-radio">
									<input type="radio" name="isComment" th:field="*{article.isComment}" value="0" require=""/>
									<label><i></i>否</label>
								</div>
							</div>
						</div>
					</div>
					<div class="form-group">
						<div class="col-xs-12">
							<label class="control-label label-four" >文章简介 :</label>
							<div class="ml-100">
								<textarea type="text" rows="3" class="form-control" name="intro" th:text="${article.intro}"  placeholder="文章简介"></textarea>
							</div>
						</div>
					</div>
					<div class="form-group">
						<div class="col-xs-12">
							<label class="control-label label-four" >seo keywords :</label>
							<div class="ml-100">
								<textarea type="text" rows="2" class="form-control" name="seoKey" th:text="${article.seoKey}"  placeholder="文章关键词（SEO优化）"></textarea>
							</div>
						</div>
					</div>
					<div class="form-group">
						<div class="col-xs-12">
							<label class="control-label label-four" >seo description :</label>
							<div class="ml-100">
								<textarea type="text" rows="2" class="form-control" name="seoDesc" th:text="${article.seoDesc}"  placeholder="文章描述（SEO优化）"></textarea>
							</div>
						</div>
					</div>
				</div>
			</form>
		</div>
	</div>
</div>
<script th:src="${config.SITE_CDN+'/static/js/jquery.min.js'}"></script>
<script th:src="${config.SITE_CDN+'/static/js/bootstrap.min.js'}"></script>
<script th:src="${config.SITE_CDN+'/static/js/app.js'}"></script>
<script th:if="${article.editorType==1}" th:src="${config.SITE_CDN+'/static/js/wangEditor.min.js'}"></script>
<script th:if="${article.editorType==2}" th:src="${config.SITE_CDN+'/static/js/highlight.min.js'}"></script>
<script th:if="${article.editorType==2}" th:src="${config.SITE_CDN+'/static/js/simplemde.min.js'}"></script>
<script>
    var editorType = '[[${article.editorType}]]';
	$(function () {
		App.initSelect("select");
        App.initUploader({
            pick: '.upload-cover',
            url:'/upload/upload',
            accept:'jpg,png',
            before:function(){
                App.mask(".upload-cover");
            },
            onSuccess:function(picker,res){
                App.unmask(".upload-cover");
                if(res.status===200){
                    $("#cover").val(res.data.fileFullPath);
				}
            }
        });

        App.initUploader({
            pick: '.upload-video',
            url:'/upload/upload',
            before:function(){
                App.mask(".upload-video");
            },
            onSuccess:function(picker,res){
                App.unmask(".upload-video");
                if(res.status===200){
                    $("#video").val(res.data.fileFullPath);
                }
            }
        });

        App.postAjax("/admin/category/list",{disabled:true},function (data) {
            var treeSelectOptions = {
                placeHolder: "请选择",
                data: data.data,
                iconType: 2,
                nameField: 'name',
                valueField: 'id'
            };
			App.initTreeSelect("#categoryId", treeSelectOptions);
        });
        //文章类型
        $("input[name='type']").on("change",function () {
            if($(this).val()==="1"){
                $("#uploadVideoContent").hide();
            }else{
                $("#uploadVideoContent").show();
            }
        });

        //别名
		$("#aliasName").bind("input propertychange",function(event){
			var aliasName = $("#aliasName").val();
			$("#aliasNameAuto").text(aliasName===""?"${auto}":aliasName);
		});

        //标签
        $("#tags").bind("input propertychange",function(){
            var tagName = $("#tags").val();
            if(tagName===""){
                $("#tags-popup").html("").hide();
            }else{
                App.postAjax("/admin/tag/list",{name:tagName,pageSize:20},function (data) {
                    var html="";
                    $(data.data.list).each(function (index,value) {
                        html+='<li class="autocomplete-item">'+value.name+'</li>';
                    });
                    $("#tags-popup").html(html).show();
                })
            }
        }).on("focus",function () {
            if($(this).val()!==""){
                $("#tags-popup").show();
            }
        }).on("keypress",function(e) {
            if (e.keyCode === 13) {
                handleTagName($(this).val().trim());
            }
        });

        $("#tags-popup").on("click","li",function () {
            handleTagName($(this).text());
        });

        $(".article-tags-names").on("click",".remove-tag",function () {
            if($(".article-tags-names .article-tag-item").length===1){
                $(".article-tags-names .article-no-tag").show();
            }
            $(this).parent().remove();
        });

        $(document).on('mousedown', function(e){
            if($(e.target).closest('.article-tags-content').length===0){
                $("#tags-popup").hide();
            }
        });

        function handleTagName(tagName) {
            var flag = true;
            $(".article-tags-names input[name='tags']").each(function () {
                if($(this).val()===tagName){
                    flag=false;
                    return false;
                }
            });
            if(flag){
                $(".article-tags-names .article-no-tag").hide();
                var tagHtml = '<span class="article-tag-item">\n' +
					'<span class="article-tag-name">'+tagName+'</span>\n' +
					'<input name="tags" value="'+tagName+'" type="hidden"/>\n' +
					'<i class="ri-close-line remove-tag"></i>\n' +
					'</span>';
                $(".article-tags-names").append(tagHtml);
            }
            $("#tags").val("");
            $("#tags-popup").html("").hide();
        }

    });

    var articleEditor;
    if(editorType==="1") {
        var E = window.wangEditor;
        articleEditor = new E('#article-editor');
        articleEditor.customConfig.uploadImgServer = '/upload/uploadForEditor';
        articleEditor.customConfig.uploadFileName = 'img';
        articleEditor.customConfig.uploadImgTimeout = 30000;
        articleEditor.customConfig.uploadImgMaxLength = 5;
        articleEditor.create();
        articleEditor.txt.html($("#articleContent").val());
    }else{
        articleEditor = new SimpleMDE({
            element: document.getElementById("articleField"),
            autoDownloadFontAwesome: false,
            placeholder: "请输入文章内容",
            renderingConfig: {
                codeSyntaxHighlighting: true
            },
            showIcons: ["code", "table", "clean-block", "horizontal-rule"],
            tabSize: 4,
            status: [ "lines", "words"]
        });
	}

    if(editorType==="1"){
        var edtiorHeight = $(".article-extra").outerHeight()-$(".w-e-text-container").offset().top+70;
        $(".w-e-text-container").css("height",edtiorHeight+"px");
    }else{
        var edtiorHeight = $(".article-extra").outerHeight()-$(".CodeMirror-scroll").offset().top+59;
        $(".CodeMirror-scroll").css("height",edtiorHeight+"px");
    }

    function  saveArticle(status) {
		$("#articleStatus").val(status);
        if(validateArticleForm()){
        	App.postAjax("/admin/article/exist/aliasName",{id:[[${article.id}]],aliasName:$("#aliasName").val().trim()}, function (exist) {
				if(!exist){
					App.confirm({content:"确认保存文章？"},function () {
						App.postAjax("/admin/article/save",$("#articleForm").serialize(),function (data) {
							if(data.status===200){
								App.msgS(data.msg);
							}else{
								App.msgE(data.msg);
							}
						})
					})
				}else{
					App.msgE("路径别名已存在！");
					App.makeError("#aliasName","路径别名已存在");
				}
			});

        }
    }

    function  validateArticleForm() {
        var flag1 = App.validate("#articleForm");
        var flag2 = validateArticleContent();
        return flag1 && flag2;
    }

    function  validateArticleContent() {
        var articleText = editorType==="1"?articleEditor.txt.text():articleEditor.value();
        var articleHtml = editorType==="1"?articleEditor.txt.html():articleEditor.markdown(articleText);
        if(""!==articleText){
            $("#articleContentMd").val(articleText);
            $("#articleContent").val(articleHtml);
            return true;
        }else{
            var errorContainer = editorType==="1"?"#article-editor .w-e-text-container":"#article-editor .CodeMirror";
            App.makeError(errorContainer, "请输入文章内容", true);
            return false;
        }
	}
</script>
</body>
</html>